<template>
  <div ref="chartRef4" :style="{ width, height }" class="chart"></div>
</template>

<script lang="ts" setup>
  import { Ref, ref, watch } from 'vue';
  import { useECharts } from '/@/hooks/web/useECharts';
  const props = defineProps({
    loading: {
      type: Boolean as PropType<Boolean>,
      default: false,
    },
    width: {
      type: String,
      default: '100%',
    },
    height: {
      type: String,
      default: '100%',
    },
    autoResize: {
      type: Boolean,
      default: true,
    },
    chartData: {
      type: Array,
      default: () => [],
    },
    color: {
      type: Array,
      default: () => ['#5B8FF9', '#00FFFC', '#F6B13C', '#8E41F6', '#DB6D15'],
    },
    radius: {
      type: String,
      default: () => '60%',
    },
    piePosition: {
      type: Array,
      default: () => ['28%', '50%'],
    },
    legendPosition: {
      type: String,
      default: '14%',
    },
    labelLine: {
      type: Object,
      default: () => ({
        show: false,
        length: 6,
        length2: 8,
        showAbove: true,
      }),
    },
    isAnimation: {
      type: Boolean,
      default: true,
    },
  });
  const chartRef4 = ref<HTMLDivElement | null>(null);
  const { setOptions } = useECharts(chartRef4 as Ref<HTMLDivElement>);
  const total = ref<any>(0);
  watch(
    () => props.loading,
    () => {
      if (!props.loading) {
        return;
      }
      //TODO
      initChart();
    },
    {
      immediate: true,
    }
  );

  function initChart() {
    total.value = props.chartData.reduce((pre, cur: any) => {
      return pre + cur.value;
    }, 0);
    setOptions(
      {
        // tooltip: {
        //   trigger: "item",
        //   formatter: function(params) {
        //     var html = params.name + "<br>";
        //     html += params.marker + "数量：" + params.value + "<br>";
        //     html += params.marker + "占比：" + params.percent + "%";
        //     return html + "<br>";
        //   },
        // },
        tooltip: {
          trigger: 'item',
          formatter: '{b} :<br/> {c} ({d}%)',
          padding: [2, 4],
          textStyle: {
            fontSize: 12,
            // lineHeight: 14,
          },
        },
        legend: {
          show: true,
          type: 'plain', // 默认就是 plain 类型，显示为圆圈
          orient: 'vertical',
          left: '55%',
          top: 'center', // 垂直居中
          itemWidth: 6, // 圆圈宽度
          itemHeight: 6, // 圆圈高度
          itemGap: 4, // 图例每项之间的间隔
          icon: 'circle', // 确保使用圆形
          formatter: function (name) {
            const item = props.chartData.find((item) => item?.name === name);
            const percent = total.value === 0 ? 0 : ((item?.value / total.value) * 100).toFixed(1);
            return `{name|${name}}  {percent|${percent}%}`;
          },
          itemStyle: {
            borderWidth: 0, // 去掉圆点的边框
          },
          textStyle: {
            rich: {
              name: {
                color: '#DBF0FF',
                fontSize: 12,
              },
              percent: {
                color: '#DBF0FF',
                fontSize: 16,
              },
            },
          },
        },
        grid: {
          left: 0,
          bottom: 0,
          right: 0,
          top: 0,
        },
        // graphic: [
        //   {
        //     //环形图中间添加文字
        //     type: 'text', //通过不同top值可以设置上下显示
        //     left: '16%',
        //     top: '35%',
        //     style: {
        //       text: '总经营数', //发生\n时段
        //       fill: '#64A7F6', //文字的颜色
        //       fontSize: 16,
        //       textAlign: 'center',
        //       textBaseline: 'middle', // 垂直居中
        //     },
        //   },
        //   {
        //     type: 'text', // 文本类型
        //     left: '14%',
        //     top: '46%', // 垂直居中
        //     style: {
        //       text: '4333', // 多行文字，用 \n 换行
        //       fontSize: 30,
        //       width: 100,
        //       fill: '#96CEF7', // 默认文字颜色
        //       textAlign: 'center', // 文字对齐方式
        //       textBaseline: 'middle', // 垂直居中
        //     },
        //   },
        // ],
        series: [
          {
            type: 'pie',
            center: props.piePosition as [],
            radius: ['48%', '60%'], // 空心
            avoidLabelOverlap: false,

            label: {
              show: false,
              // {name|{b}}\n{text|{c}}
              formatter: '{text|{c}}',
              rich: {
                text: {
                  fontSize: 10,
                  //color: '#999'
                },
                // name: {
                //   fontSize: 12,
                //   color: 'rgba(0, 0, 0, 0.6500)'
                // }
              },
            },
            emphasis: {
              itemStyle: {
                shadowBlur: 2,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)',
              },
              label: {
                // show: true
                // fontSize: '14',
                // fontWeight: 'bold'
              },
            },
            itemStyle: {
              borderWidth: 2, // 设置边框宽度为 1px
              borderColor: '#0B3D5B', // 扇形边框颜色（白色）
            },
            animation: props.isAnimation as boolean,
            labelLine: props.labelLine,
            color: props.color as [],
            data: props.chartData as [],
          },
          {
            type: 'pie',
            center: props.piePosition as [],
            radius: ['68%', '68%'], // 外圆环的半径范围
            data: [1], // 使用一个虚拟数据来创建圆环
            avoidLabelOverlap: true,

            itemStyle: {
              color: 'transparent', // 内部颜色透明
              borderWidth: 1, // 圆环的宽度
              borderColor: {
                type: 'linear', // 线性渐变
                x: 0,
                y: 0,
                x2: 1,
                y2: 0,
                colorStops: [
                  { offset: 0, color: '#1B66BA' }, // 起始颜色
                  { offset: 0.5, color: '#0F4671' }, // 中间颜色
                  { offset: 1, color: '#1B66BA' }, // 结束颜色
                ],
              },
            },
            label: {
              show: false, // 隐藏标签
            },
            animation: false,
            tooltip: {
              show: false, // 隐藏提示
            },
            emphasis: {
              disabled: true, // 禁用鼠标悬停效果
            },
          },
        ],
      },
      true
    );
  }
</script>
